<template>
  <div class="table">

    <div class="container el-table_p">
      <div class="handle-box ">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num noPay">￥{{ allAmount }}</div>
                  <div>待收总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num overtime-nopay">￥{{ delayAmount }}</div>
                  <div>逾期总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num payed">￥{{ holdAmount }}</div>
                  <div>已收总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="6">
            <el-card>
              <div class="grid-content">
                <div class="grid-cont-center">
                  <div class="grid-num normal-pay">￥{{receivableAmount}}</div>
                  <div>应收总金额</div>
                </div>
              </div>
            </el-card>
          </el-col>

        </el-row>

        <div class="selectBox">
          <div>
            <div> 关键字：</div>
            <div class="block">
              <el-input v-model="select_word" placeholder="输入关键字（姓名/用户名）" class="handle-input"></el-input>
            </div>
          </div>
          <div>
            <div> 选择状态：</div>
            <div class="block">
              <el-select style="width: 100px !important;" v-model="selectValue" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div> 选择方案：</div>
            <div class="block">
              <el-select style="width: 100px !important;" v-model="planValue" placeholder="请选择">
                <el-option v-if="planOptions.length > 1" v-for="item in planOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div> 选择时间段：</div>
            <div class="block">
              <el-date-picker v-model="timeFrame" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div>
            <div></div>
            <div class="block">
              <el-button type="primary" @click="selectBtn">查询</el-button>
            </div>
          </div>

          <!--导出-->
          <div>
            <div></div>
            <div class="block">
              <el-button type="success" @click="downOrderList">下载订单</el-button>
            </div>
          </div>
          <!-- <el-col :span="3">
            <download-excel class="export-excel-wrapper"
            :data="orderList"
            :fields="json_fields"
            name="订单.xls">
              <el-button type="primary">导出Excel</el-button>
            </download-excel>
          </el-col> -->

        </div>


      </div>
    </div>
    <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="orderList"
      :header-cell-style="{ background: '#f4f3f9', color: 'black', }">
      <!--<el-table-column type="selection" ></el-table-column>-->
      <el-table-column width="80" prop="num" label="序号" align="center"></el-table-column>

      <el-table-column prop="userAccount" label="个人信息" align="">
        <template #default="scope">
          <div>
            学员姓名：{{ scope.row.userTrueName }}
          </div>

          <div>
            学员电话：{{ scope.row.phone }}
          </div>
          <div>
            学员微信：{{ scope.row.wx }}
          </div>
          <div>
            学员QQ：{{ scope.row.qq }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程信息" align="">
        <template #default="scope">
          <div>
            课程名称：{{ scope.row.name }}
          </div>
          <div>
            课程时长：{{ scope.row.term }}
          </div>
          <div>
            开课日期：{{ scope.row.startDate.split(" ")[0] }}
          </div>
          <!--<div>-->
          <!--创建时间：{{ scope.row.createTime}}-->
          <!--</div>-->
          <!--<div>-->
          <!--审核通过时间：{{ scope.row.auditTime}}-->
          <!--</div>-->
          <!-- <div>
            是否监护人办理：{{ scope.row.parentOperate }}
          </div> -->
        </template>
      </el-table-column>
      <el-table-column prop="name" label="办理信息" align="">
        <template #default="scope">
          <div>
            申请分期金额：￥{{ scope.row.amount }}
          </div>
          <div>
            分期手续费：￥{{ scope.row.serviceFee }}
          </div>
          <div>
            支付方式：{{ scope.row.stageOne + "+" + scope.row.stageTwo + "A" }}
          </div>
          <!--<div>-->
          <!--一次支付折扣：￥{{ scope.row.maxCoupon }}-->
          <!--</div>-->
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 0">
            <span class="overtime-nopay">
              {{ "待审核" }}
            </span>
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
          </template>
          <template v-if="scope.row.status == 1">
            <span class="payed">
            {{ "审核通过" }}
            </span>
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
          </template>
          <template v-if="scope.row.status == 2">
            <span class="noPay">
            {{ "支付中" }}
            </span>
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
          </template>
          <template v-if="scope.row.status == 3">
            <span class="payed">
            {{ "已结清" }}
            </span>
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
          </template>
          <template v-if="scope.row.status == 4">
            <span class="normal-pay">
            {{ "已关闭" }}
            </span>
            <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
        <template slot-scope="scope">
          <span>
            {{ scope.row.remark ? scope.row.remark : "" }}{{ scope.row.revokeReason ? scope.row.revokeReason : "" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <!-- <el-table-column label="操作" align="center" v-if="level == 0"> -->
        <template slot-scope="scope">
          <el-button size="mini" class="template_btn" type="primary" @click="getAuditDate(scope.row)">编辑</el-button>
          <el-button size="mini" class="template_btn" type="success" @click="orderDetail(scope.row)">分期</el-button>
          <!--<el-button size="mini" class="template_btn" type="danger" @click="handleDelete(scope.row)">删除-->
          <!--</el-button>-->
          <el-button size="mini" class="template_btn" type="primary" v-if="scope.row.signName"
            @click="lookAgreement(scope.row.signName)">查看协议</el-button>

        </template>

      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
        :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="total, sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="删除订单" :visible.sync="delVisible" width="80%" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="delOrderArr"
        :header-cell-style="{ background: '#f4f3f9', color: 'black', }">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="userAccount" label="个人信息" align="">
          <template #default="scope">

            <div>
              学员姓名：{{ scope.row.userAccount }}
            </div>
            <div>
              学员电话：{{ scope.row.phone }}
            </div>
            <!-- <div>
              学员微信：{{ scope.row.wx }}
            </div>
            <div>
              学员QQ：{{ scope.row.qq }}
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程信息" align="">
          <template #default="scope">
            <div>
              课程名称：{{ scope.row.name }}
            </div>
            <div>
              课程时长：{{ scope.row.term }}
            </div>
            <div>
              开课日期：{{ scope.row.startDate.split(" ")[0] }}
            </div>
            <!-- <div>
              是否监护人办理：{{ scope.row.parentOperate }}
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="name" label="办理信息" align="">
          <template #default="scope">
            <div>
              申请分期金额：￥{{ scope.row.amount }}
            </div>
            <div>
              分期手续费：￥{{ scope.row.serviceFee }}
            </div>
            <div>
              支付方式：{{ scope.row.stageOne + "+" + scope.row.stageTwo + "A" }}
            </div>
            <!--<div>-->
            <!--一次支付折扣：￥{{ scope.row.maxCoupon }}-->
            <!--</div>-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              {{ "待审核" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
            </template>
            <template v-if="scope.row.status == 1">
              {{ "审核通过" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
            </template>
            <template v-if="scope.row.status == 2">
              {{ "支付中" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <template v-if="scope.row.status == 3">
              {{ "已结清" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <template v-if="scope.row.status == 4">
              {{ "已关闭" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:支付中，3：已结清，4：已关闭-->
          </template>
        </el-table-column>


      </el-table>

      <span slot="footer">
        <el-button size="mini" @click="delVisible = false">取消</el-button>
        <el-button size="mini" @click="deleteRow" type="primary">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="更新订单" :visible.sync="centerDialogVisible" width="50%" center>
      <div align="center" style="margin-bottom: 20px;color: red;font-size: 18px">请核对更改订单</div>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="update_orderList"
        :header-cell-style="{ background: '#f4f3f9', color: 'black', }">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="userAccount" label="个人信息" align="" width="200px">
          <template #default="scope">

            <div>
              学员姓名：{{ scope.row.userTrueName }}
            </div>
            <div>
              学员电话：{{ scope.row.phone }}
            </div>
            <div>
              学员微信：{{ scope.row.wx }}
            </div>
            <div>
              学员QQ：{{ scope.row.qq }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程信息" align="">
          <template #default="scope">
            <div>
              课程名称：{{ scope.row.name }}
            </div>
            <div>
              课程时长：{{ scope.row.term }}
            </div>
            <div>
              开课日期：{{ scope.row.startDate.split(" ")[0] }}
            </div>
            <!-- <div>
              是否监护人办理：{{ scope.row.parentOperate }}
            </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="name" label="办理信息" align="">
          <template #default="scope">
            <div>
              申请分期金额：￥{{ scope.row.amount }}
            </div>
            <div>
              分期手续费：￥{{ scope.row.serviceFee }}
            </div>
            <div>
              支付方式：{{ scope.row.stageOne + "+" + scope.row.stageTwo + "A" }}
            </div>
            <!--<div>-->
            <!--一次支付折扣：￥{{ scope.row.maxCoupon }}-->
            <!--</div>-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              {{ "待审核" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">待审核</el-button>-->
            </template>
            <template v-if="scope.row.status == 1">
              {{ "审核通过" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">审核通过</el-button>-->
            </template>
            <template v-if="scope.row.status == 2">
              {{ "支付中" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <template v-if="scope.row.status == 3">
              {{ "已结清" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <template v-if="scope.row.status == 4">
              {{ "已关闭" }}
              <!--<el-button size="mini" type="primary" @click="getAuditDate(scope.row)">已关闭</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:支付中，3：已还清，4：已关闭-->
          </template>
        </el-table-column>


      </el-table>
      <el-form :model="registerForm" ref="registerForm" label-width="100px" style="width:100% !important;">


        <!-- <el-form-item  label="状态" size="mini" style="margin-left: 15px;margin-top: 10px">
          <template >
            <input type="radio" :disabled="Formstatus" name="status" value="1" v-model="registerForm.status">&nbsp;审核通过&nbsp;&nbsp;
          </template>
          <input type="radio" :disabled="FormstatusNum==4" name="status" value="4" v-model="registerForm.status">&nbsp;通过拒绝&nbsp;&nbsp;
        </el-form-item> -->

        <el-form-item label="状态" size="mini" style="margin-left: 15px;margin-top: 10px"
          v-if="registerForm.status == 0 || registerForm.status == 1 || registerForm.status == 2">

          <template v-if="registerForm.status != 2">
            <input type="radio" checked :disabled="Formstatus" name="status" value="1" v-model="myState"
              style="margin-left: 35px">
            &nbsp;审核通过&nbsp;&nbsp;
            <input type="radio" :disabled="FormstatusNum == 4" name="status" value="4" v-model="myState">
            &nbsp;拒绝通过&nbsp;&nbsp;
          </template>

          <template v-if="registerForm.status == 2">
            <input type="radio" name="setStatu2" checked="checked" disabled value="1" v-model="myState" id="radio2"
              style="margin-left: 35px">&nbsp;支付中&nbsp;&nbsp;

            <input type="radio" name="setStatu2" value="4" v-model="myState">&nbsp;关闭&nbsp;&nbsp;
          </template>
        </el-form-item>

        <!-- 关闭、结清 -->
        <el-form-item label="状态" size="mini" style="margin-left: 15px;margin-top: 10px"
          v-if="registerForm.status == 3 || registerForm.status == 4">
          <template v-if="registerForm.status == 3">
            <div style="margin-left: 35px">&nbsp;已结清&nbsp;&nbsp;</div>
          </template>
          <template v-else>
            <div style="margin-left: 35px">&nbsp;已关闭&nbsp;&nbsp;</div>
          </template>
        </el-form-item>


        <el-form-item prop="amount" label="课程金额（元）" label-width="140px" size="mini"
          style="margin-left: 10px;margin-top: 10px">
          <el-input :readonly="orderStatus" disabled v-model="registerForm.amount" style="width: auto"
            placeholder="课程金额（元）"></el-input>
          <el-button size="mini" :disabled="FormstatusNum == 4" type="success"
            @click="identity_dialogVisible = true">查看认证信息</el-button>
          <el-button size="mini" :disabled="FormstatusNum == 4" type="warning" @click="showMonplan()">查看支付计划</el-button>
        </el-form-item>
        <el-form-item prop="remark" label="备注原因" label-width="140px"
          style="margin-left: 15px; margin-top: 15px;width:100% !important;">
          <el-input size="mini" type="textarea" :disabled="FormstatusNum == 4" v-model="registerForm.remark"
            style="width:80% !important;margin-left: -5px" placeholder="若关闭请填写关闭订单原因，若拒绝请填写拒绝原因！"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="goBack(1)">取消</el-button>
        <el-button size="mini" :disabled="FormstatusNum == 4" @click="updateAudit" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!--<el-dialog title="详情" :visible.sync="detailVisible" width="80%" center>-->
    <!--<order-stage :id="id"></order-stage>-->
    <!--</el-dialog>-->


    <el-dialog title="用户身份信息" :visible.sync="identity_dialogVisible" width="300px" center>
      <div align="center">
        <el-image style="width: 100px; height: 100px"
          :src="'http://payment-admin.itentbase.com' + registerForm.idCardFontUrl"
          :preview-src-list="['http://payment-admin.itentbase.com' + registerForm.idCardFontUrl]">
        </el-image>
        <el-image style="width: 100px; height: 100px"
          :src="'http://payment-admin.itentbase.com' + registerForm.idCardBackUrl"
          :preview-src-list="['http://payment-admin.itentbase.com' + registerForm.idCardBackUrl]">
        </el-image>
        <!-- <img :src=" 'http://payment.itentbase.com/'+idCardFontUrl"/>
        <img :src="'http://payment.itentbase.com/'+idCardFontUrl"/> -->
      </div>
      <span slot="footer">
        <el-button size="mini" @click="identity_dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 查看支付计划 -->
    <el-dialog title="查看支付计划" :visible.sync="payDate_dialogVisible" width="50%" center>
      <span>
        <div>
          <el-steps direction="vertical">
            <el-step
              :title="index | filterTotalSatge(moneyPayPlan.everyMonth, moneyPayPlan.serviceMoneyMonth, moneyPayPlan.rateMoneyMonth, moneyPayPlan.getBackDate, that)"
              :description="'含学费' + moneyPayPlan.everyMonth + '元、 ' +
                ' 技术服务费' + moneyPayPlan.serviceMoneyMonth + '元、 ' + ' 提前支付优惠' + moneyPayPlan.rateMoneyMonth + '元'"
              v-for="(moneyPayPlan, index) in moneyPlanNum" :key="index">
            </el-step>
          </el-steps>
        </div>
      </span>
      <span slot="footer">
        <el-button size="mini" @click="payDate_dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>







  </div>
</template>
<script>
import { getAllOrder, delOrder, updateAuditById, getPlanList, getAllAmount, get_downInformDate, getMonplan } from '../../api/public/api';
import { mixin } from '../../../static/js/index';
import { getNowFormatDate } from '../../units/time'
import { downloadFile } from '../../units/newBlob'


export default {
  mixins: [mixin],
  // components:{
  //   orderStage
  // },
  data() {
    return {
      that: this,
      bg_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      current: 1,
      size: 10,
      pages: 1,
      total: 0,
      level: 1,
      orderList: [],
      Formstatus: false,
      FormstatusNum: "",
      id: "",
      delVisible: false,
      detailVisible: false,//删除弹窗是否显示
      json_fields: {
        "订单": 'createDate' + '\n' + 'email',//表格内容

      },
      allAmount: 0,       //待收总金额
      delayAmount: 0,           //逾期总金额
      holdAmount: 0,    // 已收总金额
      receivableAmount: 0,    // 应收总金额
      registerForm: {
        "userAccount": "",
        "term": 0,
        "amount": 0,
        "parentOperate": "",
        "status": 0,
        "planId": 0, // 确定订单的方案id
        "idCardBackUrl": '', // 身份证背面
        "idCardFontUrl": '', // 身份证正面

      },
      id: 0,
      centerDialogVisible: false, //审核弹窗是否显示
      disabled: true,
      options: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '待审核'
        },
        {
          value: 1,
          label: '审核通过'
        },
        {
          value: 2,
          label: '支付中'
        },
        {
          value: 3,
          label: '已结清'
        },
        {
          value: 4,
          label: '已关闭'
        }
      ],
      select_word: "",
      selectValue: -1,
      timeFrame: "",//时段
      update_orderList: [],
      orderStatus: true,
      planOptions: [
        {
          value: -1,
          label: '全部'
        }],
      planValue: -1,
      delOrderArr: [],
      identity_dialogVisible: false, //身份认证信息
      payDate_dialogVisible: false,  // 详细支付计划
      moneyPlanNum: [], //支付详情
      myState: "1", // 编辑框中的状态
    }
  },

  created() {
    let data = {
      current: this.current,
      size: this.size
    }
    this.getData(data);
    this.level = localStorage.getItem('level')
  },
  mounted() {

    this.getPlan()
    this.getAllAmount()
  },
  methods: {
    //查看协议
    lookAgreement(row) {
      console.log(row)
      this.$router.push({
        path: '/userAgreement',
        query: {
          signName: row
        }
      })
    },
    // 展示支付计划
    showMonplan() {
      this.payDate_dialogVisible = true;
      getMonplan(this.registerForm.amount, this.registerForm.planId).then(res => {
        if (res.data.code == 0) {
          this.moneyPlanNum = res.data.data
        }
      })

    },
    // 订单下载
    downOrderList() {
      let status = this.selectValue;
      if (status == -1) {
        status = '';
      }
      let planId = this.planValue;
      if (planId == -1) {
        planId = '';
      }
      let data = {
        userAccount: this.select_word,
        status: status,
        planId: planId,
        createTime: this.timeFrame[0],
        queryEndTime: this.timeFrame[1],
      }
      get_downInformDate(data).then(res => {
        downloadFile(res, '订单报表.xls')
      })



    },


    handleSizeChange(val) {
      this.size = val;
      this.updateData()
    }
    ,
    // 第几页
    handleCurrentChange(val) {
      this.current = val;
      this.updateData()
    },
    //查询待收总金额，逾期总金额
    getAllAmount() {
      let data = {}
      getAllAmount(data).then(res => {
        if (res.data.code == 0) {

          this.allAmount = parseFloat(res.data.data.amount).toFixed(2)
          this.delayAmount = parseFloat(res.data.data.delayAmount).toFixed(2)
          this.holdAmount = parseFloat(res.data.data.holdAmount).toFixed(2)
          this.receivableAmount = parseFloat(res.data.data.receivableAmount).toFixed(2)
        }
        // console.log("查询待收总金额，逾期总金额", res)
      })
    },
    //查询
    selectBtn() {
      let data = {
        current: 1,
        size: this.size
      }
      if (this.select_word) {
        data.userAccount = this.select_word
      }
      if (this.selectValue != -1) {
        data.status = this.selectValue.toString()
      }
      if (this.planValue != -1) {
        data.planId = this.planValue.toString()
      }
      if (this.timeFrame) {
        data.createTime = this.timeFrame[0]
        data.queryEndTime = this.timeFrame[1]
      }
      this.getData(data);
    },
    //数据更新
    updateData() {
      this.select_word = ""
      this.planValue = -1
      this.timeFrame = []
      let data = {
        current: this.current,
        size: this.size
      }
      this.getData(data);
      this.getAllAmount()
    },
    //查询方案
    getPlan() {
      let data = {}
      getPlanList(data).then(res => {
        if (res.data.code == 0) {
          let result = res.data.data.records
          for (let i in result) {
            let obj = {}
            obj['value'] = result[i].id
            obj['label'] = result[i].planName
            this.planOptions.push(obj)
          }
        }
      })
    },
    //查询所有订单
    getData(data) {
      getAllOrder(data).then(res => {
        console.log(res)
        if (res.data.code != 0) {
          this.notify(res.data.msg, "error");
        }
        if (res.data.code == 0) {
          this.pages = res.data.data.pages
          this.total = res.data.data.total
          // res.data.data.records.sort(function(a,b){
          //   return a.createTime - b.createTime;
          // })
          let num = 1
          res.data.data.records.map(item => {
            item.num = num++

            // if (item.createTime) {
            //   item.createTime = getNowFormatDate(item.createTime)
            // }
            // if (item.auditTime) {
            //   item.auditTime = getNowFormatDate(item.auditTime)
            //
            // }
            // if (item.updateTime) {
            //   item.updateTime = getNowFormatDate(item.updateTime)
            // }
          })
          this.orderList = res.data.data.records

          // console.log(this.orderList)
        }
      })
    },

    //删除一条订单
    handleDelete(row) {
      this.id = row.orderId
      this.delVisible = true
      this.delOrderArr = []
      this.delOrderArr.push(row)
    },
    deleteRow() {
      delOrder(this.id)
        .then(res => {
          if (res.data.code == 0) {
            this.delVisible = false;
            this.updateData()
            this.notify("删除成功", "success");
          } else {
            this.notify("删除失败", "error");
          }
        })
        .catch(err => {
          console.log(err);
        });

    },
    //查看订单详情
    orderDetail(row) {
      // if (row.status !=0) {
      this.id = row.orderId
      // this.detailVisible=true
      this.$router.push({
        path: "/orderStage",
        query: {
          id: this.id
        }
      });
      // } else {
      //   this.notify("请确认订单状态", "error");
      // }

    },

    //获取状态
    getAuditDate(row) {
      this.id = row.orderId
      this.update_orderList = []
      this.orderStatus = row.status == 0 ? false : true
      this.update_orderList.push(row)
      this.centerDialogVisible = true
      this.registerForm.userAccount = row.userAccount
      this.registerForm.term = row.term
      this.registerForm.amount = row.amount
      this.registerForm.parentOperate = row.parentOperate
      this.registerForm.status = row.status
      this.registerForm.planId = row.planId
      this.registerForm.idCardFontUrl = row.idCardFontUrl
      this.registerForm.idCardBackUrl = row.idCardBackUrl
      //审核通过后按钮禁用，
      this.Formstatus = row.status == 1 || row.status == 2 || row.status == 3 || row.status == 4 ? true : false
      this.FormstatusNum = row.status
    },
    //确认修改状态
    updateAudit() {
      let data = {
        "id": this.id,
        // "status": parseInt(this.registerForm.status),
        "status": parseInt(this.myState),
        "amount": this.registerForm.amount,
        "remark": this.registerForm.remark
      }
      if (data.status == 4) {
        if (!this.registerForm.remark) {
          this.notify("请填写关闭理由", "error");
        } else {
          updateAuditById(data).then(res => {
            if (res.data.code == 0) {
              this.centerDialogVisible = false;
              this.updateData()
              this.notify("修改成功", "success");
            } else {
              this.notify("修改失败", "error");
            }
          })

        }
      } else {
        updateAuditById(data).then(res => {
          if (res.data.code == 0) {
            this.centerDialogVisible = false;
            this.updateData()
            this.notify("修改成功", "success");
          } else {
            this.notify("修改失败", "error");
          }
        })

      }

    },
    //取消
    goBack(i) {
      this.myState = '1';
      if (i == 1) {
        this.registerForm = {
          "userAccount": "",
          "term": 0,
          "amount": 0,

          "parentOperate": "",
          "status": 0
        }

      } else {
        this.updateData();
      }
      this.centerDialogVisible = false
    },
    //表头行的设置
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#fff;font-wight:500;font-size:13px;text-align:center;height:50px;'

    },
  },
  filters: {
    // 修改支付计划 -显示tital格式
    filterTotalSatge(index, monthAmount, monthServeFee, monthDiscount, getBackDate, that) {
      let totalAmount = ''
      totalAmount = that.$math.subtract(
        that.$math.add(that.$math.bignumber(monthAmount), that.$math.bignumber(monthServeFee)),
        that.$math.bignumber(monthDiscount)
      );
      getBackDate = getBackDate.substring(0, 10)
      return (index + 1) + '期' + '   支付日期：' + getBackDate + '   支付金额：' + totalAmount + '元'
    }
  }

}
</script>


<style scoped>
@import "./order.css";

.handle-box {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 50px;
}

.grid-cont-center {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: darkgray;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
  /* color: #ff625b; */
}

.grid-num+div {
  color: black;
  font-weight: 600;
  font-size: 16px;
}

.template_btn {
  margin-bottom: 10px !important;
  margin-left: 0 !important;
}

.pagination {
  text-align: center;
  margin-top: 15px;
  margin-right: 60px;
}

/*el-step修改样式*/
.el-step {
  width: 130%;
  padding-top: 2px;
}</style>
